<template>
    <div>
        <table>
            <thead >
                <th>序号</th>
                <th>单选</th>
                <th>商品名</th>
                <th>价格</th>
                <th>数量</th>
                <th>操作</th>
            </thead>
            <tr v-for="(item, index) in shops" :key="index">
                <td>{{ index + 1 }}</td>
                <td> <input type="checkbox" v-model="checkList" :value="item"></td>
                <td>{{ item.name }}</td>
                <td>{{ item.price }}</td>
                <td> 
                    <button @click="sub(index)">-</button> &nbsp;
                    <input type="text" v-model="item.number" @change="validateNumber(item)"> &nbsp;
                    <button @click="add(index)">+</button> 
                </td>
                <td><button @click="del(index, item)">删除</button></td>
            </tr>  
        </table>
        <p>
            <input type="checkbox" v-model="checked" @click="checkAll"> 全选计算一共需要支付{{addTotal }}元 单独计算只需{{ shopTotal }}元
        </p>
    </div>
</template>
<script>



export default {
    data() {
        return {
            shops: [
                { id: 1, name: "html", price: 55, number: 1 ,},
                { id: 2, name: "css", price: 66, number: 1 },
                { id: 3, name: "javascript", price: 77, number: 1 },
                { id: 4, name: "jq", price: 88, number: 1 },
            ],
           checkList:[],
           checked:false,
        }
    },
    methods: {
        sub(index){
            if(this.shops[index].number > 1){
                this.shops[index].number--
            }
        },
        add(index){
            this.shops[index].number++
        },
        del(index,item){
            this.shops.splice(index, 1)
            //去掉购物车中的商品
            for(const i in this.checkList){
                if(this.checkList[i].id == item.id){
                    this.checkList.splice(i,1)
                }
            }
        },
        checkAll(){
            if(!this.checked){
                this.checkList = []
                this.shops.forEach(item => {
                    this.checkList.push(item)
                });
            }else{
                this.checkList =[]
            }
        }
    },
    watch:{
        checkList(){
            if(this.checkList.length === this.shops.length){
                
                this.checked = true
            }else{
                this.checked = false
            }
            if(this.checkList.length == 0){
                this.checked = false
            }
        }
    },
     computed:{
        addTotal(){
            let res = 0
            this.shops.forEach(item => {
                res += item.number * item.price
            })
            return res
        },
       shopTotal(){
        let res = 0
        this.checkList.forEach(item => {
            res += item.number * item.price
        })
        return res
       } 
    }, 
}
</script>
<style lang="scss">
        p{
            text-align:left
        }
</style>